<template>
	<view>
		<view class="header">
			<view class="userInfo">
				<view class="image">
					<image class="touxiang" src="@/static/img/tou/tou.jpg"></image>
				</view>
				<view class="user" v-if="userInfo.userName==''">
					<view class="username" @click="getLoginUserInfo()">
						<text>用户名/登录</text>
					</view>
					<view class="detail">
						<text>个人简介</text>
					</view>
				</view>

				<view class="user" v-if="userInfo.username!=''">
					<view class="username">
						<text>{{userInfo.userName}}</text>
					</view>
					<view class="detail">
						<text>{{userInfo.desc}}</text>
					</view>
				</view>
			</view>
			<view class="studyInfo">
				<view class="studyItem">
					<view class="sVal">
						<text>123</text>
					</view>
					<view class="sName">
						<text>统计</text>
					</view>
				</view>
				<view class="studyItem">
					<view class="sVal">
						<text>123</text>
					</view>
					<view class="sName">
						<text>统计</text>
					</view>
				</view>
				<view class="studyItem">
					<view class="sVal">
						<text>123</text>
					</view>
					<view class="sName">
						<text>统计</text>
					</view>
				</view>
			</view>
		</view>
		<view class="icons-content">
			<view class="icons">
				<view class="icon">
					<view class="">
						<image src="@/static/img/myInfo/会员.svg"></image>
					</view>
					<text>会员</text>
				</view>
				<view class="icon">
					<view class="">
						<image src="@/static/img/myInfo/订单.svg"></image>
					</view>
					<text>订单</text>
				</view>
				<view class="icon">
					<view class="">
						<image src="@/static/img/myInfo/打卡.svg"></image>
					</view>
					<text>打卡</text>
				</view>
				<view class="icon">
					<view class="">
						<image src="@/static/img/myInfo/金额.svg"></image>
					</view>
					<text>金额</text>
				</view>
			</view>
		</view>
		<uni-section title="设置" class="unisection">
			<template v-slot:decoration>
				<view class="decoration"></view>
			</template>
			<uni-list>
				<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon" title="设置1" />
				<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon" title="设置2" />
				<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon" title="设置3" />
			</uni-list>
		</uni-section>
	</view>
</template>

<script setup>
	import {
		getUserInfo,
		userLogin
	} from '@/api/userApi.js'

	var userInfo = ref({
		userName: "",
		desc: ""
	})

	var contentVal = ref("msg")
	var extraIcon = ref({
		color: '#c4c4c4',
		size: '22',
		type: 'gear-filled'
	})

	onLoad(() => {
		// wxUserLogin()
		webUserLogin()
	})


	function wxUserLogin() {
		uni.login({
			provider: 'weixin', //使用微信登录
			success: function(loginRes) {
				console.log(loginRes.code);
				userLogin({
					"wxCode": loginRes.code
				}).then(response => {
					console.log("登录成功", response)
					uni.setStorageSync("token", response.data.tokenValue);
				})
			}
		});
	}

	function webUserLogin() {
		let token = uni.getStorageSync("token");
		if (!token) {
			userLogin({
				"wxCode": "xxxxxxxxxx"
			}).then(response => {
				console.log("登录成功", response)
				uni.setStorageSync("token", response.data.tokenValue);
				uni.setStorageSync("openId", response.data.loginId);
			})
		}
	}


	function getWxLoginUserInfo() {
		uni.getUserProfile({
			desc: "用于完善会员资料",
			lang: "zh_CN",
			success: function(res) {
				
			}
		})
	}

	function getLoginUserInfo() {
		getUserInfo().then(res => {
			userInfo.value.userName = res.data.nickName
			userInfo.value.desc = res.data.nickName
		})
	}
</script>

<style lang="scss">
	.scroll-content::-webkit-scrollbar {
		display: none;
	}

	.touxiang {
		height: 160rpx;
		width: 160rpx;
		border-radius: 100%;
	}

	.icons-content {
		padding: 20rpx 50rpx 30rpx 50rpx;
		border-bottom: rgba(138, 115, 115, 0.05) solid 10rpx;
	}

	.header {
		// background: var(--default-background-color) url("@/static/img/myInfo/juxing4.svg") no-repeat;
		// background: var(--default-background-color);
		background-color: #FCF7C4;
		padding: 10rpx 50rpx 10rpx 50rpx;
		background-position: right;
	}

	.userInfo {
		display: flex;
		flex-direction: row;
		margin: 30rpx 0rpx;

		.user {
			margin-left: 20rpx;

			.username {
				margin: 10rpx 0rpx 20rpx 0rpx;
				font-size: 1.25rem;
			}

			.detail {
				font-size: 0.8rem;
				color: var(--datail-text-color);
			}
		}
	}

	.studyInfo {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 30rpx 0rpx;
		width: 100%;

		.studyItem {
			display: flex;
			flex-direction: column;

			.sName {
				font-size: 1.1rem;
				text-align: center;
			}

			.sVal {
				text-align: center;
				margin-bottom: 10rpx;
			}
		}
	}

	.icons {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 20rpx;

		.icon {
			text-align: center;

			image {
				height: 80rpx;
				width: 80rpx;
			}
		}
	}

	.unisection {
		margin: 10rpx 40rpx;
	}

	.decoration {
		width: 8rpx;
		height: 24rpx;
		margin-right: 6rpx;
		border-radius: 30%;
		background-color: #efd05a;
	}
</style>